<template>
	<div id="interfaceCorrection">
		<codemirror :value="code" :options="cmOptions"> </codemirror>
	</div>
</template>

<script>
// 引入组件
import { codemirror } from "vue-codemirror";
// 引入高亮样式
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css'
// 引入语言
import "codemirror/mode/vue/vue.js";
export default {
	props: {
	  code: {
	    type: String,
	    default: "",
	  },
	},
	
  // 设置组件
  components: {
    codemirror,
  },
  data() {
  	return {
     	cmOptions: {
        	mode: "text/javascript",
        	theme: "base16-dark",
			lineNumbers: true,
			readOnly: true,
			tabSize: 4, // 制表符
			indentUnit: 2, // 缩进位数
			lineNumbers: true,
			ineWiseCopyCut: true,
			lineWiseCopyCut: true,
			viewportMargin: 1000,
			autofocus: true,
			autocorrect: true,
	 
			gutters: [
			  "CodeMirror-lint-markers",
			  "CodeMirror-linenumbers",
			  "CodeMirror-foldgutter"
			],
			lineWrapping: false,
			foldGutter: true, // 启用行槽中的代码折叠
			autoCloseBrackets: true, // 自动闭合符号
			autoCloseTags: true,
			matchTags: { bothTags: true },
			matchBrackets: true, // 在光标点击紧挨{、]括号左、右侧时，自动突出显示匹配的括号 }、]
			styleSelectedText: true,
			styleActiveLine: true,
			autoRefresh: true,
			highlightSelectionMatches: {
			  minChars: 2,
			  trim: true,
			  style: "matchhighlight",
			  showToken: false
			},
     	},
 	 }
  }
}

</script>
